<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/tsk.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/fangyuan.js" type="module"></script>
  <title>demo</title>
  <style>
    .calendar {
      position: relative;
    }

    .calendar-body {
      padding: 8px;
      margin-bottom: 30px;
    }

    .weekdays {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .weekdays span {
      width: 32px;
      text-align: center;
      font-weight: 700;
      color: #888;
    }

    .days {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      ;
      grid-gap: 0;
      margin-left: 0;
      margin-right: 0;

    }

    .days button {
      width: 40px;
      height: 40px;
      margin: 0 0 -1px 0;
      background-color: #fff;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .date-day:hover {
      background-color: #f1f1f1;
    }

    .date-day {
      border: 1px solid rgb(228, 231, 231) !important;
      color: #222 !important;
    }
  </style>
</head>

<body>
  <div class="calendar">
    <input type="text" id="date-input" placeholder="选择日期">
    <div class="date_selector" style="display: block;">
      <div class="date_left">
        <svg class="_1ri93fe" focusable="false" viewBox="0 0 1000 1000">
          <path
            d="M336 275L126 485h806c13 0 23 10 23 23s-10 23-23 23H126l210 210c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7L55 524c-11-11-11-21 0-32l249-249c21-22 53 10 32 32z">
          </path>
        </svg>
      </div>
      <div class="date_right">
        <svg class="_1ri93fe" focusable="false" viewBox="0 0 1000 1000">
          <path
            d="M694 242l249 250c12 11 12 21 1 32L694 773c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210-210H68c-13 0-23-10-23-23s10-23 23-23h806L662 275c-21-22 11-54 32-33z">
          </path>
        </svg>
      </div>
      <div class="date_t">2023年8月</div>
      <div class="calendar-body">
        <div class="weekdays">
          <span>日</span>
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
        </div>
        <div class="days"></div>
      </div>
      <div class="clear_button">
        <div>清除日期</div>
      </div>
    </div>
  </div>


  <script>
    const $ = document.querySelector.bind(document);
    const $$ = (selector) => Array.from(document.querySelectorAll(selector));

    // 获取相关元素
    const dateInput = $('.date_t');
    //大盒子
    const calendarDropdown = $('.date_selector');
    //月份
    const currentMonth = document.querySelector('.date_t');
    const daysContainer = document.querySelector('.days');

    // 获取当前日期
    const currentDate = new Date();

    // 月份名称
    const monthNames = [
      '1月', '2月', '3月', '4月', '5月', '6月',
      '7月', '8月', '9月', '10月', '11月', '12月'
    ];

    // 渲染日历
    function renderCalendar(year, month) {
      // 清空日历
      daysContainer.innerHTML = '';

      // 设置当前月份
      currentMonth.textContent = `${year}年${monthNames[month]}`;

      // 获取当前月份的第一天
      const firstDay = new Date(year, month, 1);

      // 获取当前月份的最后一天
      const lastDay = new Date(year, month + 1, 0);

      // 获取当前月份的天数
      const numDays = lastDay.getDate();

      // 获取当前月份的第一天是星期几
      const firstDayOfWeek = firstDay.getDay();

      // 创建空白格子
      for (let i = 0; i < firstDayOfWeek; i++) {
        const emptyCell = document.createElement('button');
        emptyCell.disabled = true;
        daysContainer.appendChild(emptyCell);
      }

      // 创建日期格子
      for (let day = 1; day <= numDays; day++) {
        const cell = document.createElement('button');
        cell.textContent = day;
        cell.classList.add('date-day');
        cell.addEventListener('click', function () {
          const selectedDate = new Date(year, month, day);
          const formattedDate = selectedDate.toISOString().split('T')[0];
          dateInput.value = formattedDate;
          toggleCalendarDropdown();
        });
        daysContainer.appendChild(cell);
      }
    }

    // 显示/隐藏日历下拉框
    function toggleCalendarDropdown() {
      calendarDropdown.classList.toggle('open');
    }

    // 上一个月份按钮点击事件处理逻辑
    $('.date_left').addEventListener('click', function () {
      currentDate.setMonth(currentDate.getMonth() - 1);
      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });

    // 下一个月份按钮点击事件处理逻辑
    $('.date_right').addEventListener('click', function () {
      currentDate.setMonth(currentDate.getMonth() + 1);
      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });

    // 监听输入框点击事件
    dateInput.addEventListener('click', toggleCalendarDropdown);

    // 初始化日历
    renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
  </script>


</body>


</html>